<template>
  <div class="pictureDialog">
    <el-dialog 
      title="文件详情"
      :model-value="fileMetaDialogFlag"
      @update:model-value="emit('update:fileMetaDialogFlag', $event)"
      :close-on-click-modal="false"
      width="60%"
      class="viewVideo"
      :before-close="handleCloseImg"
    >
        <div class="file-meta-box">
            <div v-if="fileMetaObj.ftype=='7'">                
                <h3>文件信息</h3>                      
                <p class="item title">
                    <span>名称:</span>{{fileMetaObj.name}}
                </p>
                <p class="item title">
                <span>文件FID:</span>
                {{fileMetaObj.fid}}
                </p>
                <div class="doble-box item">                     
                    <p>
                        <span>文件大小:</span>
                        <span>{{fileMetaObj.fsize | fileSizeFilter}}</span>
                    </p> 
                    <p>
                        <span>文件类型:</span>
                        <span>{{fileMetaObj.mimetype}} (ID: {{fileMetaObj.mimeid}})</span>
                    </p>            
                </div>
                <div class="doble-box item">                     
                    <p>
                        <span>修改时间:</span>
                        <span>{{fileMetaObj.mtime}}</span>
                    </p> 
                    <p>
                        <span>文件时长:</span>
                        <span>{{fileMetaObj.codetime | fileDuraFilter}}</span>
                    </p>            
                </div>                
                <h3 style="padding-top:10px">视频参数</h3>
                <div class="doble-box item">                     
                    <p>
                        <span>视频编码:</span>
                        <span>{{fileMetaObj.vcode}}</span>
                    </p> 
                    <p>
                        <span>编码档次:</span>
                        <span>{{fileMetaObj.profile}}</span>
                    </p>            
                </div>               
                <div class="doble-box item">                     
                    <p>
                        <span>分辨率:</span>
                        <span>{{fileMetaObj.resolvepower}}</span>
                    </p> 
                    <p>
                        <span>视频码率:</span>
                        <span>{{fileMetaObj.vbit_rate}}</span>
                    </p>            
                </div>
                <div class="doble-box item">                     
                    <p>
                        <span>宽高比:</span>
                        <span>{{fileMetaObj.display_ratio}}</span>
                    </p> 
                    <p>
                        <span>码率类型:</span>
                        <span>{{fileMetaObj.bittype}}</span>
                    </p>            
                </div>
                <div class="doble-box item">                     
                    <p>
                        <span>像素格式:</span>
                        <span>{{fileMetaObj.pix_fmt}}</span>
                    </p> 
                    <p>
                        <span>B帧类型:</span>
                        <span>{{fileMetaObj.b_frames}}</span>
                    </p>            
                </div>
                <div class="doble-box item">                     
                    <p>
                        <span>视频帧率:</span>
                        <span>{{fileMetaObj.frame_rate}}</span>
                    </p> 
                    <p>
                        <span>LEVEL:</span>
                        <span>{{fileMetaObj.level}}</span>
                    </p>            
                </div>
                <h3 style="padding-top:10px">音频参数</h3>
                <div class="doble-box item">                     
                <p>
                    <span>音频编码:</span>
                    <span>{{fileMetaObj.acode}}</span>
                </p> 
                <p>
                    <span>采样率:</span>
                    <span>{{fileMetaObj.sample_rate}}</span>
                </p>            
                </div>
                <div class="doble-box item">                     
                <p>
                    <span>音频码率:</span>
                    <span>{{fileMetaObj.abit_rate}}</span>
                </p> 
                <p>
                    <span>声道数:</span>
                    <span>{{fileMetaObj.channel}}</span>
                </p>            
                </div>      
              
            </div>
            <div v-if="fileMetaObj.ftype=='2'">
                <h3>文件信息</h3>                      
                <p class="item title">
                    <span>名称:</span>{{fileMetaObj.name}}
                </p>
                <p class="item title">
                <span>文件FID:</span>{{fileMetaObj.fid}}
                </p>
                <div class="doble-box item">                     
                    <p>
                        <span>文件大小:</span>
                        <span>{{fileMetaObj.fsize | fileSizeFilter}}</span>
                    </p> 
                    <p>
                        <span>文件类型:</span>
                        <span>{{fileMetaObj.mimetype}}</span>
                    </p>            
                </div>
                <div class="doble-box item">                     
                    <p>
                        <span>修改时间:</span>
                        <span>{{fileMetaObj.mtime}}</span>
                    </p> 
                    <p>
                        <span>分辨率:</span>
                        <span>{{fileMetaObj.resolvepower}}</span>
                    </p>            
                </div> 
            </div>
            <div v-if="fileMetaObj.ftype=='3'">
                <h3>文件信息</h3>                        
                <p class="item title">
                    <span>名称:</span>{{fileMetaObj.name}}
                </p>
                <p class="item title">
                <span>文件FID:</span>{{fileMetaObj.fid}}
                </p>
                <p class="item title">
                <span>修改时间:</span>{{fileMetaObj.mtime}}
                </p>
                <div class="doble-box item">                       
                    <p>
                        <span>文件大小:</span>
                        <span>{{fileMetaObj.fsize | fileSizeFilter}}</span>
                    </p> 
                    <p>
                        <span>文件类型:</span>
                        <span>{{fileMetaObj.mimetype}}</span>
                    </p>            
                </div>
            </div>
            <div v-if="fileMetaObj.ftype=='4'">
                <h3>文件信息</h3>                        
                <p class="item title">
                    <span>名称:</span>{{fileMetaObj.name}}
                </p>
                <p class="item title">
                <span>文件FID:</span>{{fileMetaObj.fid}}
                </p>
                <p class="item title">
                <span>修改时间:</span>{{fileMetaObj.mtime}}
                </p>
                <div class="doble-box item">                       
                    <p>
                        <span>文件大小:</span>
                        <span>{{fileMetaObj.fsize | fileSizeFilter}}</span>
                    </p> 
                    <p>
                        <span>文件类型:</span>
                        <span>{{fileMetaObj.mimetype}}</span>
                    </p>            
                </div>
                <h3 style="padding-top:10px">音频参数</h3>
                <div class="doble-box item">                       
                <p>
                    <span>音频编码:</span>
                    <span>{{fileMetaObj.acode}}</span>
                </p> 
                <p>
                    <span>采样率:</span>
                    <span>{{fileMetaObj.sample_rate}}</span>
                </p>            
                </div>
                <div class="doble-box item">                       
                <p>
                    <span>音频码率:</span>
                    <span>{{fileMetaObj.abit_rate}}</span>
                </p> 
                <p>
                    <span>声道数:</span>
                    <span>{{fileMetaObj.channel}}</span>
                </p>            
                </div>    
            </div>
            <div v-if="fileMetaObj.ftype!='7' && fileMetaObj.ftype!='2' &&fileMetaObj.ftype!='3' ">
                <h3 >文件信息</h3>                      
                <p class="item title">
                    <span>名称:</span>{{fileMetaObj.name}}
                </p>
                <p class="item title">
                    <span>文件FID:</span>{{fileMetaObj.fid}}
                </p>
                <p class="item title">
                    <span>修改时间:</span>{{fileMetaObj.mtime}}
                </p>
                <p class="item title">
                    <span>文件大小:</span>{{fileMetaObj.fsize | fileSizeFilter}}
                </p>
                <p class="item title">
                    <span>文件类型:</span>{{fileMetaObj.mimetype}} (ID: {{fileMetaObj.mimeid}})
                </p>
            </div>  
            

        </div>

      <div class="close-left50"
           @click="handleCloseImg">
        <svg-icon name="icon-close-cirle"
                  style="width:30px;height:30px;color:#fff;"></svg-icon>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
.file-meta-box{
    padding: 30px 50px;
    .item{
        &.title{
            span{
                display:inline-block;
                 width: 80px !important;
            }
        }
        span{
            display: inline-block;
            width:80px;
            padding-right:10px;
            &:last-child{
                display: inline-block;
                width: 150px;
                overflow: hidden;
            }
        }
        padding:10px;
        border-bottom: 1px solid #ccc;
    }
}
.doble-box{
    display: flex;
p{
    display: flex;
    &:last-child{
        padding-left: 50px;
    }
}
}
</style>
<script setup>
import { onMounted, watch } from 'vue'

// Props
const props = defineProps({
  fileMetaObj: {
    type: Object,
    default: () => ({})
  },
  fileMetaDialogFlag: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['handleCloseImg', 'update:fileMetaDialogFlag'])

// 工具函数
const getfilesize = (size) => {
  if (!size || size === 0) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let index = 0
  let s = Number(size)
  while (s >= 1024 && index < units.length - 1) {
    s /= 1024
    index++
  }
  return s.toFixed(2) + ' ' + units[index]
}

const secondTransM = (timelen) => {
  if (!timelen || timelen === 0) return '00:00'
  const h = Math.floor(timelen / 3600)
  const m = Math.floor((timelen % 3600) / 60)
  const s = Math.floor(timelen % 60)
  if (h > 0) {
    return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
  }
  return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
}

// 过滤器
const fileSizeFilter = (size) => {
  const data = getfilesize(size)
  return data
}

const fileDuraFilter = (timelen) => {
  const data = secondTransM(timelen)
  return data
}

// 方法
const handleCloseImg = () => {
  emit('update:fileMetaDialogFlag', false)
  emit('handleCloseImg')
}

// 定义Vue过滤器（在Vue3中使用函数形式）
defineExpose({
  handleCloseImg
})

// 在挂载时记录日志
onMounted(() => {
  console.log('FileMeta挂载时的fileMetaObj:', props.fileMetaObj)
})

// 监听fileMetaObj变化
watch(() => props.fileMetaObj, (newVal) => {
  console.log('FileMeta接收到的fileMetaObj信息:', newVal)
}, { deep: true })
</script>